<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OL</title>
    <link rel="stylesheet" href="lib/ol.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <style>
        .map-marker {
            width: 60px;
            height: 60px;
        }
    </style>
    <script src="lib/ol.js"></script>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    const tile = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
        })
    })
    const zoom = 4, center = ol.proj.fromLonLat([107.11040599933166, 34.26271532332011])
    var map = new ol.Map({
        target: 'map',
        layers: [
            tile
        ],
        view: new ol.View({
            center,
            zoom
        })
    });

    fetch('./data/data1.json')
        .then(res => res.json())
        .then(res => {
            res.forEach(r => {
                addChart(r)
            })
        })
    function addChart(data) {
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                show: false
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '70%',
                    label: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        const ele = document.createElement('div')  // 创建容器
        ele.classList.add('map-marker')
        const overlay = new ol.Overlay({ // 新建地图覆盖
            element: ele,
            positioning: 'center-center',
            position: ol.proj.fromLonLat([data.x, data.y])
        })
        map.addOverlay(overlay) // 添加地图覆盖
        const echart = echarts.init(ele); // 初始化echart
        echart.setOption(option) // 设置option
    }
</script>
</body>
</html>